<template>
    <div >

        <slide :announcement="announcement" :slides="slides"></slide>
        <book @onBookSelect="preview($event)" :books="lastupdatebooks" :heading="heading1"></book>
        <book @onBookSelect="preview($event)" :books="lastupdatebooks" :heading="heading2"></book>
        <modal-dialog ref="dialog">
            <div slot="heading"></div>
            <div>
                <div v-if="selected">
                    <h2>{{ selected.title }}</h2>
                </div>
            </div>
        </modal-dialog>
    </div>

</template>

<script type="text/ecmascript-6">
    import book from "./book.vue"
    import slide from "./slide.vue"
    import ModalDialog from "./dialog.vue"
    export default{
        components:{slide,book,ModalDialog},
        data(){
            return {
                lastupdatebooks:[],
                heading1:'新书上架',
                heading2:'编辑推荐',
                slides:[],
                announcement:'',
                selected:undefined
            }
        },
        beforeMount(){
        console.log("beforeMount")
        },
        beforeCreate(){
          console.log("beforeCreate")
        },
        mounted(){
            console.log("mounted")
        },
        created(){
          this.$http.get('/data.json').then(res=>{
              this.announcement=res.body.announcement
              this.slides=res.body.slides
              this.lastupdatebooks=res.body.lastupdatebooks
          })
        },
        methods:{
            preview(book){
                this.selected = book
                this.$refs.dialog.open()
            }
        }

    }
</script>
